/* eslint-disable no-unused-vars */
import React, { useEffect, useState } from "react";
import styles from './launch.module.css'
import { useHistory } from "react-router-dom/cjs/react-router-dom";
import { Redirect, Route, Switch, useLocation } from "react-router-dom/cjs/react-router-dom.min";
import ConfigLayout from "./configLayout";
import ProcessingLayout from "./processingLayout";
import ResultLayout from "./resultLayout";
import icon_exit from "@/assets/icon_exit.webp"
import { setAccountCache, setPasswordCache, setTokenCache } from "@/store/actions/storage";


export default function LaunchLayout() {

    const history = useHistory();
    const location = useLocation();

    const [menuList, setMenuList] = useState([
        {
            label: "配置",
            checked: true,
            path: "/config"
        },
        {
            label: "进行中",
            checked: false,
            path: "/processing"
        },
        {
            label: "已完成",
            checked: false,
            path: "/result"
        }
    ]);

    useEffect(() => {

        return () => {
        }
    }, [])

    const onHandleExitClick = () => {
        setAccountCache("");
        setPasswordCache("");
        setTokenCache("");
        window.location.href = '/login';
    }

    return (
        <div className={styles.launchRoot}>

            <div className={styles.launchTopLayout}>
                <div className={`${styles.launchFlexFull}`}>Diandian数据</div>
                <img className={`${styles.launchTableListRowIcon}`} src={icon_exit} alt="" onClick={onHandleExitClick} />
            </div>

            <div className={styles.launchLeftLayout}>
                {menuList && menuList.length > 0 && menuList.map((value, index) => {
                    return <div className={`${styles.launchLeftLayoutMenu} ${(value.path === location.pathname) ? styles.launchLeftLayoutMenuSelected : ''}`} key={index} onClick={() => { history.replace(value.path); }}>{value.label}</div>
                })}
            </div>

            <div className={styles.launchContentLayout}>
                <Switch>
                    <Route path="/config"><ConfigLayout /></Route>
                    <Route path="/processing"><ProcessingLayout /></Route>
                    <Route path="/result"><ResultLayout /></Route>
                    <Redirect to="/config" />
                </Switch>
            </div>
        </div>
    )
}